<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tip Calculator</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "container">
      <h1>Tip Calculator</h1>
      <div id = "calculator">
        <form>
          <p>How much was your bill?</p>
          <p>$ <input id = "billamt" type = "text" placeholder="Bill Amount"></p>
          <p>How was your service?</p>
            <p>
              <select id="serviceQual"> <!-- Drop Down list -->
                <option disabled selected value="0">-- Choose an Option --</option>
                <option value="0.3">30&#37; &#45; Outstanding</option>
                <option value="0.2">20&#37; &#45; Good</option>
                <option value="0.15">15&#37; &#45; It was OK</option>
                <option value="0.1">10&#37; &#45; Bad</option>
                <option value="0.05">5&#37; &#45; Terrible</option>
              </select>
            </p>
        </form>
        <p>How many people are splitting the bill?</p>
        <input id = "peopleamt" type = "text" placeholder = "Number of People"> 
        <button type = "button" id = "calculate">Calculate!</button>
      </div> <!-- Calculator Ends -->

      <div id = "totalTip">
        <sup>$</sup><span id = "tip">0.00</span>
        <small id = "each">each</small>
      </div> <!-- Total Tip End -->
  </div> <!-- Container End -->
  <script src = "script.js"></script>
  </body>
</html>
